common={
    initCatalogueMagePage:function(){
        this.Authorization= window.localStorage.getItem("auth_token") || '';
        this.socket = io('http://1.85.32.6:50006');
        //this.socket = io('http://192.168.5.169:9099');
        // 绑定dom对象
        this.obj = {
            searchText:$('#searchText'),
        };
        // 声明全局变量
        this.vars = {
            map:"",
            map1:"",
            tongdaonum:4,
            attrId:[],
            idnum:{
                id:"",
                num:"",
                width:"",
                height:"",
                fileVideo:"",
                controls:""
            },
            stopidnum:{
                id:"",
                num:"",
                width:"",
                height:"",
                fileVideo:"",
                controls:""
            },
            data:{
                owersId:"",
                vehicleNo:"",
                page:"1",
                size:"10",
                transType:"1,2,3"
            },
            shipinStop:{
                vehicleId:"",
                channelIds:[],
            },
            shipin:{
                vehicleId:"",
                channelIds:[],
            },
            datareaslut:[],
            markers:[],
            dataAttrmt:[],//marker 轨迹查看
        };
        this.btnEvent();
        this.carSearch(this.vars.data);
        this.page(this.vars.data);
        this.qwe();
    },
    carSearch:function(dataAttr){
        var self=this;
        var mapurl=HTTP+urls.carSearch;
        self.vars.datareaslut=[];
        self.vars.markers=[];
        $.ajax({
            headers: {
                authorization: self.Authorization
            },
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: dataAttr,
            url: mapurl,
            type: "get",
            success: function (data) {
                console.log("1235",data);
                var attrdata=data.data;
                var datareaslut=[];
                self.vars.markers=[];
                for (var i = 0; i < attrdata.length; i++) {
                    datareaslut.push({
                        order: attrdata[i].order,
                        id: attrdata[i].id,
                        acc:attrdata[i].acc,
                        color:attrdata[i].vehicleColor,
                        position: [attrdata[i].lng, attrdata[i].lat],
                        carPi: attrdata[i].vehicleNo,
                        status:attrdata[i].status,
                        adress:attrdata[i].site,
                        transTypeName:attrdata[i].transTypeName,
                        owner:attrdata[i].owersName
                    })
                };
                self.searchcarbtn();
                self.allTable(datareaslut)
            },
        });
    },
    searchcarbtn:function(){
        var self=this;
        $(".tsearch_boxInput1 .tseach-btnm1").click(function(){
            var value=$("#userCar").val();
            self.vars.data.vehicleNo=value;
            self.carSearch(self.vars.data);
            self.page(self.vars.data)
        })
    },
    page:function(dataAttr){
        var self=this;
        var mapurl=HTTP+urls.carSearch;
        $.ajax({
            headers: {
                authorization: self.Authorization
            },
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: dataAttr,
            url: mapurl,
            type: "get",
            success: function (data) {
                console.log(data);
                self.vars.tototal = parseInt(data.total / self.vars.data.size) + 1;
                $(".page").createPage({
                    pageNum:self.vars.tototal,
                    current:1,
                    backfun: function(e) {
                        self.vars.data.page=e.current;
                        self.carSearch(self.vars.data)
                    }
                });
            }

        });
    },
    allTable:function(data){
        console.log(data)
        var self=this;
        $(".ssjk_centerposition ul").html();
        var tableStr="";
        for(var i=0;i<data.length;i++){
            var accId;
            if(data[i].acc=="0"){
                accId="ACC 关"
            }else{
                accId="ACC 开"
            }
            tableStr+="<li>"+
                "<div class='cnf_sigin'>"+
                "<div class='cnf_signleft'>"+
                "<span class='cnf_bluecolor' data-href='"+data[i].color+"'><em>"+data[i].carPi+"</em></span>"+
                "<span class='cnf_kai'>"+accId+"</span>"+
                "</div>"+
                "<div class='cnf_toggle' data-href='"+data[i].vehicleId+"'>" +
                "<ul>" +
                "<li data-href='"+(i*4+1)+"' data-id='"+data[i].id+"' data-carip='"+data[i].carPi+"'>通道1</li>"+
                "<li data-href='"+(i*4+2)+"' data-id='"+data[i].id+"' data-carip='"+data[i].carPi+"'>通道2</li>"+
                "<li data-href='"+(i*4+3)+"' data-id='"+data[i].id+"' data-carip='"+data[i].carPi+"'>通道3</li>"+
                "<li data-href='"+(i*4+4)+"' data-id='"+data[i].id+"' data-carip='"+data[i].carPi+"'>通道4</li>"+
                "</ul>"+
                "</div>"+
                "</div>"+
                "</li>"
        }
        $(".ssjk_centerposition ul").html(tableStr);
        var attrId=[];
        var num=0,tnum=0;
        $(".ssjk_centerposition ul li").click(function(){
            $(this).find(".cnf_toggle").toggle();
            console.log(tnum);
            $(this).find(".cnf_toggle ul li").click(function(e){
                e.stopPropagation();
                e.preventDefault();
                num+=1;
                var id=$(this).attr("data-href");
                var textName=$(this).text();
                var vehicleid=$(this).attr("data-id");
                var vehicarip=$(this).attr("data-carip");
                var Iindex=$(this).index()+1;
                attrId.push({
                    "id":id,
                    "vehicleid":vehicleid,
                    "Iindex":Iindex,
                    "vehicarip":vehicarip,
                    "textName":textName,
                    "num":num
                });
                var width=$(".jk_main ul li").eq(num%4-1).width();
                var height=$(".jk_main ul li").eq(num%4-1).height();
                self.vars.idnum.id=id;
                self.vars.idnum.num=Iindex;
                self.vars.idnum.width=width;
                self.vars.idnum.height=height;
                $(".jk_main ul li").eq(num%self.vars.tongdaonum-1).find(".z-indexrt").html(vehicarip+"\\"+textName);
                if(num<=self.vars.tongdaonum){
                    $(".jk_main ul li").eq(num-1).find(".mon_rain").attr("id",id);
                }else{
                    self.vars.idnum.id=attrId[num%self.vars.tongdaonum-1].id;
                    self.vars.idnum.num=[attrId[num%self.vars.tongdaonum-1].Iindex];
                    self.vars.idnum.width=width;
                    self.vars.idnum.height=height;
                    self.creatshipin("58",self.vars.shipinStop);
                    $(".jk_main ul li").eq(num%self.vars.tongdaonum).find(".mon_rain").removeAttr("id").attr("id",id);
                }
                self.vars.shipin.vehicleId=vehicleid;
                self.vars.shipin.channelIds=[Iindex];
                self.creatshipin("57",self.vars.shipin);
            })
        })
        function creatATTR(controls){
            $.each(attrId,function(i,dom){
                console.log(attrId[i])
                $(".jk_main ul li .mon_rain").eq(i).attr("id",attrId[i].id);
                var width=$(".jk_main ul li").eq(i).width();
                var height=$(".jk_main ul li").eq(i).height();
                self.vars.shipin.vehicleId=attrId[i].vehicleid;
                self.vars.shipin.channelIds=[attrId[i].Iindex];
                $(".jk_main ul li").eq(attrId[i].num-1).find(".z-indexrt").html(attrId[i].vehicarip+"\\"+attrId[i].textName);
                self.creatvideosoket(self.vars.shipin,attrId[i].Iindex,attrId[i].id,width,height,controls);

            })
        }
        $(".ssjk_maptitright span").click(function(){
            creatATTR(true)
        });
        $(".ssjk_maptitrightvideo span").click(function(){
            var index=$(this).index();
            $(this).addClass("ssjk_active").siblings("").removeClass("ssjk_active");
            if(index !=1){
                creatATTR(true)
            }else{
                creatATTR(false)
            }
        })
        $(".ssjk_maptitright span").click(function(){
            var index=$(this).index();
            if(index==0){
                self.vars.tongdaonum=16
            }else if(index==1){
                self.vars.tongdaonum=9
            }else if(index==2){
                self.vars.tongdaonum=6
            }else if(index==3){
                self.vars.tongdaonum=4
            }else{
                self.vars.tongdaonum=1
            }
            creatATTR(true)
        })
        $(".ssjk_maptitrightvideo span").click(function(){
            var index=$(this).index();
            $(this).addClass("ssjk_active").siblings("").removeClass("ssjk_active");
            if(index !=1){
                creatATTR(true)
            }else{
                creatATTR(false)
            }
        })
    },
    creatVideo:function(id,width,height,fileVideo,autostart){
        var player = cyberplayer(id).setup({
            width: width,
            height: height,
            file: fileVideo, // <—rtmp直播地址
            autostart: autostart,
            stretching: "uniform",
            volume: 100,
            controls: true,
            rtmp: {
                reconnecttime: 5, // rtmp直播的重连次数
                bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
            },
            ak: "976604a77e2c40fdab9cf7f054ddba12"
        });
    },
    creatvideosoket:function(shipindata,num,id,width,height,controls){
        var self=this;
        var conmanedtn = {
            "Command": "57",
            "CommandType": "Business",
            "token": self.Authorization,
            "Body": {
                "data":{
                    "param":[shipindata],
                    "avitemType": "0"
                }
            }
        }
        console.log("123",JSON.stringify(conmanedtn));
        console.log("123",self.socket.io);
        self.socket.emit('Business', JSON.stringify(conmanedtn));


        return self.socket.on('Business', function(data){
            var datacount= JSON.parse(data);
            console.log("yy",datacount);
            var videoname=datacount.Body;
            var fileVideo='rtmp://1.85.32.4:1935/live/'+videoname.vehicleNo+"."+videoname.vehicleColor+"."+num+".0."+videoname.authorizeCode;
            self.creatVideo(id,width,height,fileVideo,controls);
        });

    },
    creatshipin:function(command,shipindata){
        console.log(shipindata)
        var self=this;
        var conmanedtn = {
            "Command":command,
            "CommandType": "Business",
            "token": self.Authorization,
            "Body": {
                "data":{
                    "param":[shipindata],
                    "avitemType": "0"
                }
            }
        }
        console.log("123",JSON.stringify(conmanedtn));
        console.log("123",self.socket.io);
        self.socket.emit('Business', JSON.stringify(conmanedtn));

    },
    qwe:function(){
        var self=this;
        return self.socket.on('Business', function(data){
            var datacount= JSON.parse(data);
            console.log("yy",datacount);
            if(datacount.Body != null){
                console.log("ttt",self.vars.idnum);
                var videoname=datacount.Body;
                var fileVideo='rtmp://1.85.32.4:1935/live/'+videoname.vehicleNo+"."+videoname.vehicleColor+"."+self.vars.idnum.num+".0."+videoname.authorizeCode;
                self.creatVideo(self.vars.idnum.id,self.vars.idnum.width,self.vars.idnum.height,fileVideo,true);
            }

        })
    },
    btnEvent:function(){
        var attr="";
        $(".jk_main ul").html();
        for(var i=0;i<4;i++){
            attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
        };
        $(".jk_main ul").html(attr);
        $(".jk_main ul li").css({width:"calc(100%/2 - 6px)",height:"calc(100%/2 - 6px)"})
        $(".ssjk_maptitright span").click(function(){
            var index=$(this).index();
            $(this).addClass("ssjk_active").siblings("").removeClass("ssjk_active");
            if(index==0){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<16;i++){
                    attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(25% - 6px)",height:"calc(25% - 6px)"});
            }
            if(index==1){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<9;i++){
                    attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/3 - 6px)",height:"calc(100%/3 - 6px)"});
            }
            if(index==2){
                var attr="<li class='jk_big'><div class='mon_rain'></div><div class='z-indexrt'></div></li>";
                $(".jk_main ul").html();
                for(var i=0;i<5;i++){
                    attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/3 - 6px)",height:"calc(100%/3 - 6px)"});
                $(".jk_main ul li.jk_big").css({width:"calc(100%/3*2 - 6px)",height:"calc(100%/3*2 - 6px)"})
                $(".jk_main ul li").eq(3).css({clear:"both"});
            }
            if(index==3){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<4;i++){
                    attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100%/2 - 6px)",height:"calc(100%/2 - 6px)"})
            }
            if(index==4){
                var attr="";
                $(".jk_main ul").html();
                for(var i=0;i<1;i++){
                    attr+="<li><div class='mon_rain'></div><div class='z-indexrt'></div></li>"
                };
                $(".jk_main ul").html(attr);
                $(".jk_main ul li").css({width:"calc(100% - 6px)",height:"calc(100% - 6px)"});
            }
        })
    },
}

$(function(){
    common.initCatalogueMagePage();
});
